<template>
  <div class="need-list">
    <el-row v-if="needList.length === 0">
      <el-empty description="暂无商品信息"></el-empty>
    </el-row>
    <el-row v-else>
      <el-col :span="12" v-for="(need, index) in needList" :key="index">
        <div class="item-need" v-if = !need.isok >
          <div class="cover"    >
            <div style=" display: inline-block;width: 300px;">
              <img :src="coverListParse(need)" alt="" srcset="" >

            </div>
            <span style="display: inline-block;margin-left: 0px" v-html="need.detail"></span>
          </div>
          <div style="display: inline-block;" >

            <img :src="need.myAvatar" alt="" srcset="" class="avatar">
                     <span style="margin-left: 10px;font-size: 20px">{{need.myName}}</span>
            <span style="color: #a7535a;font-size: 25px; margin-left: 5px">需要</span>
            <span style="font-size: 20px;color: #25c395;font-size: 20px;margin-left: 5px">{{need.needName}}</span>
        </div>



          <div style="margin-top: 5px">

            <span @click="update(need)"  class="channel-button">联系商家</span>
            <span style="font-size: 10px">发布时间：{{need.createTime}}</span>
          </div>
        </div>

      </el-col>
    </el-row>
    <div class="info">


    </div>
  </div>
</template>
<script>
import {setProductInfo} from "@/utils/storage"

export default {
  name: 'MyProduct',
  data() {
    return {
      needList: [],
      needInfoList: {}
    };
  },
  created() {
    this.fetchProduct();
    this.queryProductInfo()
  },
  methods: {
    route(need) {
      // 跳转商品详情
      this.$router.push('/need-detail?needId=' + need.id);
    },
    /**
     * 商品编辑
     * @param {*} need 待处理的商品信息
     */
    update(need){
      this.$axios.put('/need/update', need).then(res => {
        const { data } = res;
        if (data.code === 200) {
          this.$notify({
            duration: 1000,
            title: '已联系商家',
            message: '已联系商家',
            type: 'success'
          });
        }
      }).catch(error => {
        console.log("联系失败异常:", error);
      });
    },
    /**
     * 商品删除
     * @param {*} need 待操作商品信息
     */
    async handleDelete(need) {
      const confirmed = await this.$swalConfirm({
        title: `删除该需求`,
        text: `删除后不可恢复，是否继续？`,
        icon: 'warning',
      });
      if (confirmed) {
        try {
          let ids = [need.id]
          const response = await this.$axios.post(`/need/batchDelete`, ids);
          if (response.data.code === 200) {
            this.$notify({
              duration: 1000,
              title: '信息删除',
              message: '删除成功',
              type: 'success'
            });
            this.fetchProduct();
            return;
          }
        } catch (error) {
          this.$notify({
            duration: 2000,
            title: '信息删除',
            message: error,
            type: 'error'
          });
          console.error(`商品信息删除异常：`, error);
        }
      }

    },
    /**
     * 商品封面图处理
     * 从字符串转成可用数组
     * @param {*} need 待处理商品信息
     */
    coverListParse(need) {
      if (need.coverList === null) {
        return;
      }
      const newCoverList = need.coverList.split(',');
      return newCoverList[0];
    },
    /**
     * 查询用户自己发布的商品信息
     */
    fetchProduct() {
      this.$axios.post('/need/query', {}).then(res => {
        const {data} = res; // 解构
        if (data.code === 200) {
          this.needList = data.data;
        }
      }).catch(error => {
        console.log("商品查询异常：", error);
      })
    },
    queryProductInfo() {
      this.$axios.post(`/need/queryProductInfo`, {}).then(res => {
        const {data} = res;
        if (data.code === 200) {
          this.needInfoList = data.data;
        }

      }).catch(error => {
        console.log("商品指标查询异常：", error);
      });
    },
  }
};
</script>
<style scoped lang="scss">
.need-list {
  padding-block: 20px;

  .item-need {
    background-color: #f4f4f4;
    padding: 10px 10px 16px 10px;
    box-sizing: border-box;
    border-radius: 15px;
    transition: all .5s;
    cursor: pointer;
    margin-bottom: 15px;
    margin-right: 5px;

    .cover {

      img {
        width: 90%;
        height: 240px;
        border-radius: 10px;

      }
    }

    .bargain-hover {
      font-size: 12px;
      font-weight: 800;
      background-color: rgb(255, 230, 15);
      color: rgb(51, 51, 51);
      border-radius: 2px;
      padding: 2px 6px;
    }

    .title {
      font-size: 20px;
      color: #1f1f1f;
    }

    .decimel-symbol {
      font-size: 14px;
      color: #ff4f24;
      font-weight: 800;
    }

    .price {
      font-size: 24px;
      color: #ff4f24;
      font-weight: 800;
      margin-right: 6px;
    }

    .love {
      font-size: 14px;
      color: #999;
    }

  }

  .item-need:hover {
    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .info {
    position: absolute;
    top: 80px;
    right: 10px;


    .title1 {
      font-size: 26px;
      color: rgb(255, 255, 255);
      gap: 12px;

      .poin {
        display: inline-block;
        padding: 2px 6px;
        margin-inline: 6px;
        box-sizing: border-box;
        border-radius: 20px;
        cursor: pointer;
        font-size: 15px;
        color: rgb(255, 255, 255);
        background-color: rgb(197, 153, 57);
      }
    }

  }
}
.avatar{
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
</style>